<!-- 验证码登录 -->
<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="验证码登录"
    ></van-nav-bar>
    <!-- 输入框 -->
    <div class="authcode">
      <van-cell-group>
        <van-field
          @blur="phone"
          placeholder="请输入手机号"
          v-model="value"
          type="tel"
        >
          <template #left-icon>
            <div>
              <img
                class="left-icon"
                src="../../../assets/images/shouji.png"
                alt
              />
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <span class="phone_verify" v-show="regular">手机号不能为空</span>
      <span class="phone_verify" v-show="canonical">手机号格式不正确</span>
      <van-cell-group>
        <van-field v-model="auth" type="tel" placeholder="请输入验证码">
          <template #left-icon>
            <div>
              <img
                class="left-icon"
                src="../../../assets/images/shouji.png"
                alt
              />
            </div>
          </template>
          <template #button>
            <van-button round size="small" type="primary" @click="sendCode">
              {{ isRun ? `${runTime}s后重新获取` : `获取验证码` }}
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div @click="PasswordLogo" class="authcode-btn">登录</div>
      <div class="authcode-state" @click="agreement">
        <img v-if="consent" src="../../../assets/images/67.png" />
        <img v-else src="../../../assets/images/68.png" />
        <span style="color:#c6c6c6;margin:auto 5px">同意</span>
        <span @click="href('/Contract')" style="color:#6AB6AB"
          >驾校通平台使用协议、隐私政策</span
        >
      </div>
      <MoreWays></MoreWays>
    </div>
    <!-- end -->
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
// import {  } from 'vant';
import MoreWays from "./MoreWays";
import { baseURL } from "../../../assets/js/config";
// import md5 from "blueimp-md5";

// 引入接口
import { CarePhone } from "../../../assets/js/api/user";
// import { mapMutations } from "../../../store";
export default {
  name: "AuthCode",
  data() {
    return {
      value: "",
      regular: false,
      canonical: false,
      // 验证码
      auth: "",
      // 倒计时
      isRun: false,
      runTime: 60,
      consent: true,
      price: ""
    };
  },
  methods: {
    agreement() {
      if (this.consent) {
        this.consent = false;
      } else {
        this.consent = true;
      }
    },

    PasswordLogo() {
      let _this = this;

      if (this.consent) {
        Toast("请先同意协议");
        return;
      }
      if (this.value == "") {
        Toast("手机号不能为空");
        return;
      }
      if (this.value == "" || this.auth == "") {
        Toast("验证码不能为空");
        return;
      }
      // let dsBridge = require("dsbridge");
      // dsBridge.call("getCID", "", function(data) {
      //   _this.price = data;
      // Toast(_this.price);
      _this.axios
        .post(baseURL + "login/phoneLogin", {
          phone: _this.value,
          code: _this.auth,
          data: 123456
          // code: md5(_this.auth),
        })
        .then(res => {
          if (res.data.code === 0) {
            console.log(res);
            // 储存用户头像和昵称
            localStorage.setItem("img", res.data.data.user.img);
            localStorage.setItem("userName", res.data.data.user.userName);
            localStorage.setItem("token", res.data.data.token.token);
            // console.log("data里的值：" + JSON.parse(res.data.msg).token);
            sessionStorage.setItem("token", res.data.data.token.token);
            Toast.success("登陆成功");
            _this.$router.push({ path: "/" });
            // alert("登陆成功");
          }
        })
        .catch(err => {
          // console.log("报错" + err);
          Dialog.alert({
            message: `${err}网络繁忙，请稍后再试~~`
            // theme: "round-button"
          }).then(() => {
            // on close
          });
          // alert(err + "网络繁忙，请稍后再试~~");
        });
      // });
    },

    // 验证码
    sendCode() {
      // 发送验证码

      if (this.isRun) return;
      if (!/^1[3-9]\d{9}$/.test(this.value)) {
        return;
      }
      // 服务器发送验证码
      CarePhone(this.value).then(res => {
        Dialog.alert({
          message: `验证码是：${res.msg}`
          // theme: "round-button",
          // confirmButtonColor: "red"
        }).then(() => {
          // on close
          this.auth = res.msg;
        });
      });

      //   // 填写倒计时

      // });
      this.isRun = true;
      this.autoTimer = setInterval(() => {
        if (this.runTime == 0) {
          this.runTime = 60;
          this.isRun = false;
          clearInterval(this.autoTimer);
          return;
        }
        this.runTime--;
      }, 1000);
    },

    onClickLeft() {
      this.$router.push({ path: "/Ucenter" });
    },
    // 手机号码验证
    phone() {
      if (this.value === "") {
        this.regular = true;
        // alert(1);
        return;
      } else {
        this.regular = false;
      }
      // alert(2);
      if (!/^1[3-9]\d{9}$/.test(this.value)) {
        this.canonical = true;
        // console.log(this.value);
      } else {
        this.canonical = false;
        // console.log(this.value);
      }
    },
    href(url) {
      this.$router.push({ path: url });
    }
  },
  components: { MoreWays },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
